<%--
  Created by IntelliJ IDEA.
  User: yanqin
  Date: 2017/6/4
  Time: 15:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<jsp:useBean id="now" class="java.util.Date" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>${user.username}</title>
    <%@include file="common.jsp" %>
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <style type="text/css">
        .desc {
            height: 200px!important;
        }
        #getTask a{
            text-decoration: none;
        }
        .onWay{
            background-color:gold!important;
        }
        .overtime{
            background-color:red!important;
            color: #ffffff !important;
        }
        .end{
            background-color:forestgreen!important;
            color: #ffffff !important;
        }
    </style>
</head>
<body>
<div class="container">
        <br/>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" id="myTabs">
            <li role="presentation"><a href="#addTask" aria-controls="addTask" role="tab"
                                                      data-toggle="tab">添加任务</a></li>
            <li role="presentation" class="active"><a href="#getTask" aria-controls="getTask" role="tab" data-toggle="tab">查看任务</a>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane" id="addTask">
                <br/>
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">任务名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name" placeholder="任务名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="desc" class="col-sm-2 control-label">任务描述</label>
                        <div class="col-sm-10">
                            <textarea class="form-control desc" id="desc" placeholder="任务描述"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="scheduleStartTime" class="col-sm-2 control-label">计划开始时间</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control datetimepicker" id="scheduleStartTime"
                                   placeholder="计划开始时间">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="scheduleEndTime" class="col-sm-2 control-label">计划结束时间</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control datetimepicker" id="scheduleEndTime"
                                   placeholder="计划结束时间">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button class="btn btn-primary" id="addbtn">添加</button>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane active" id="getTask">
                <br/>
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <c:forEach items="${tasks}" var="task" varStatus="status">
                        <div class="panel panel-default">
                            <div class="panel-heading <c:if test="${task.isEnd==1}">end</c:if> <c:if test="${task.isEnd==0 && task.scheduleEndTime>now}">onWay</c:if> <c:if test="${task.isEnd==0 && task.scheduleEndTime<now}">overtime</c:if> " role="tab" id="heading${status.index}">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse${status.index}" aria-expanded="false" aria-controls="collapse${status.index}">
                                        <div class="row">
                                            <div class="text-left col-sm-6">任务：${task.name}</div>
                                            <div class="text-right col-sm-6">计划结束：<fmt:formatDate value="${task.scheduleEndTime}" pattern="yyyy-MM-dd"/></div>
                                        </div>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse${status.index}" class="panel-collapse collapse <c:if test="${status.first}">in</c:if>" role="tabpanel" aria-labelledby="heading${status.index}">
                                <div class="panel-body">
                                    <div class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">任务名称</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" value="${task.name}" disabled="disabled">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">计划开始时间</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" value="<fmt:formatDate value="${task.scheduleStartTime}" pattern="yyyy-MM-dd"/>" disabled="disabled">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">计划结束时间</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" value="<fmt:formatDate value="${task.scheduleEndTime}" pattern="yyyy-MM-dd"/>" disabled="disabled">
                                            </div>
                                        </div>
                                        <c:if test="${task.isEnd==1}">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">最终结束时间</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" value="<fmt:formatDate value="${task.finalEndTime}" pattern="yyyy-MM-dd"/>" disabled="disabled">
                                                </div>
                                            </div>
                                        </c:if>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">任务描述</label>
                                            <div class="col-sm-10">
                                                <textarea class="form-control desc">${task.desc}</textarea>
                                            </div>
                                        </div>
                                        <c:if test="${task.isEnd!=1}">
                                            <div class="form-group">
                                                <div class="col-sm-offset-2 col-sm-10">
                                                    <button class="btn btn-primary" id="endTask" data-id="${task.id}">结束任务</button>
                                                </div>
                                            </div>
                                        </c:if>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
</div>
<script type="text/javascript">
    var id = "${user.id}";
    $(function () {

        $(document).on('click','#endTask',function () {
            var obj = $(this);
            var id = $(this).data("id");
            $.ajax({
                url:"../task/endTask?id="+id,
                type:"get",
                success:function (result) {
                    if(result>0){
                        alert("结束任务成功");
                        obj.parents(".collapse").prev().removeClass("onWay overtime").addClass("end");
                        obj.parent().parent().remove();
                    }else{
                        alert("操作失败");
                    }
                }
            });
        });

        $("#addbtn").click(function () {
            var name = $("#name").val();
            var desc = $("#desc").val();
            var scheduleStartTime = $("#scheduleStartTime").val();
            var scheduleEndTime = $("#scheduleEndTime").val();
            if (isNull(name) || isNull(desc) || isNull(scheduleStartTime) || isNull(scheduleEndTime) || isNull(id)) {
                alert("任务名称、描述、时间，都不能为空");
            } else {
                var start=new Date(scheduleStartTime.replace("-", "/").replace("-", "/"));
                var end=new Date(scheduleEndTime.replace("-", "/").replace("-", "/"));
                if(end<start){
                    alert("计划结束日期不能小于计划开始日期");
                    return false;
                }
                var obj = {
                    'name':name,
                    'desc':desc,
                    'scheduleStartTime':scheduleStartTime,
                    'scheduleEndTime':scheduleEndTime,
                    'userid':id
                };
                $.ajax({
                    url: "../task/insert",
                    type: "post",
                    contentType:"application/json;charset=UTF-8",
                    data: JSON.stringify(obj),
                    success: function (result) {
                        if(result>0){
                            alert("添加成功");
                            $("#name").val('');
                            $("#desc").val('');
                            $("#scheduleStartTime").val('');
                            $("#scheduleEndTime").val('');
                        }else{
                            alert("添加失败");
                        }
                    }
                });
            }
        });

        $('.datetimepicker').datetimepicker({
            format: 'yyyy-mm-dd',
            weekStart: 1,
            minView: 'month',
            autoclose: true
        });
    });
</script>
</body>
</html>
